<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{gender}}</h2>
        <h2>学生年龄：{{myAge}}</h2>
        <button @click="btn">点击年龄加一</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            console.log(this)
            return {
                msg:'我是一个中国人',
                myAge:this.age, //不能对从props中接收来的属性值进行修改，但可以通过this接收过来后，再修改
            }
        },
        methods: {
            btn(){
                this.myAge++
            }
        },
        // 简单接收参数，开发中使用的多
        // props:['name','gender','age']
        
        // 接收的同时对数据类型进行限制
        // props:{
        //     name:String,
        //     gender:String,
        //     age:Number
        // }

        // 接收的同时对 数据类型 + 默认值指定 + 必要性的指定 进行限制
        props:{
            name:{
                type:String,//类型
                required:true //true必须传值 false非必须传值
            },
            gender:{
                type:String,
                required:true
            },
            age:{
                type:Number,
                default:99  //不传值的情况下，默认值99  default与required不一起写
            }
        }
    }
</script>

<style>

</style>